@box-font-size: 1.5rem;
@box-size: 2rem;
@box-color-close: silver;
@box-color-open: white;
@box-color-spark: lavender;
@box-color-wrong: red;

.mine-game {
	text-align:center;
	margin:10px auto;
	padding:10px;
	overflow:auto;
	white-space:nowrap;
	span {
		box-shadow:0 0 0 1px rgba(0,0,0,.4);
		border: 2px outset;
		box-sizing:border-box;
		display: inline-block;
		font-size:@box-font-size;
		line-height:@box-size;
		width:@box-size;
		height:@box-size;
		background:@box-color-close;
		margin:0;
		padding:0;
		cursor:default;
		vertical-align:top;
		-webkit-user-select:none;
		-moz-user-select:none;
		-ms-user-select:none;
		&.open {
			border: none;
			background: @box-color-open;
		}
		&.wrong {
			background-color:@box-color-wrong;
			&:not(.mine)::before {
				content: '×';
			}
		}
		&.mine {
			background-image:url();
			background-size:60%;
			background-position:50% 50%;
			background-repeat:no-repeat;
		}
		&.spark {
			background-color:@box-color-spark;
		}
	}
}
